<template>
  <div class="roomContainer">
    <div class="headerContainer">
      <h3>用户: &nbsp;&nbsp;&nbsp; {{username}} </h3>
    </div>
    <div class="mainContainer">
      <div class="receive col-md-6" style="padding: 10px">
        <div class="leftContainer" v-for="item in message">
        <el-avatar
        src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
        style="height: 40px"
      ></el-avatar>
        <div class="box">{{item.content}}</div>
        </div>
      </div>
      <div class="rightContainer" v-for="item in haveSend">
        <el-avatar
          src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
          style="height: 40px;float: right;"
        ></el-avatar>
        <div class="box2">{{item}}</div>
      </div>
    </div>
    <div class="inputContainer">
      <el-input
        type="textarea"
        placeholder="发送点东西吧"
        resize="none"
        v-model="textInfo"
        input-style="{outline:none,border:none}"
        :autosize="{ minRows: 6, maxRows: 6 }"
      />
      <div class="send">
        <el-button type="success" @click="sendInfo">发送</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  mounted () {
    this.message.push(this.$route.query.info)
    this.tousername=this.$route.params.item
  },
  data(){
    return{
      textInfo:'',
      tousername:'',
      username:window.localStorage.getItem('username')||'',
      message:[],
      haveSend:[]
    }
  },
  methods:{
    sendInfo(){
      this.haveSend.push(this.textInfo)
      this.$emit('showInfo',{'data':this.textInfo,'tousername':this.tousername})
    }
  }
}
</script>
<style scoped>
.box {
  margin-top: -40px;
  margin-left: 60px;
  width: 100px;
  min-height: 50px;
  padding: 10px;
  color: white;
  background: rgb(31, 186, 252);
  position: relative;
  border-radius:10px;
  border:1px solid #1FBAFC;
}
.box:before{
  content:"";
  position: absolute;
  right: 100%;
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-right: 6px solid #1FBAFC;
  border-bottom: 9px solid transparent;
}
.box:after {
  content:"";
  position: absolute;
  right: 100%;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-right: 10px solid #1FBAFC;
  border-bottom: 10px solid transparent;
}
.box2 {
  float: right;
  margin-right: 20px;
  width: 100px;
  padding: 10px;
  color: white;
  min-height: 50px;
  background: #1FBAFC;
  position: relative;
  border-radius:10px;
  border:1px solid #1FBAFC;
}
.box2:before{
  content:"";
  position: absolute;
  left: 100%;
  top: 16px;
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-left: 12px solid #1FBAFC;
  border-bottom: 12px solid transparent;
}
.box2:after {
  content:"";
  position: absolute;
  left: 100%;
  top: 18px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-left: 10px solid #1FBAFC;
  border-bottom: 10px solid transparent;
}
.roomContainer{
  height: 600px;
}
.headerContainer{
  height: 70px;
}
.inputContainer{
  height: 100px;
}
.headerContainer>h3{
  line-height: 70px;
}
.rightContainer{
  padding: 10px;
}
.mainContainer{
  background-color: white;
  height: calc( 600px - 170px);
}
.send{
  margin-top: 5px;
  margin-right: 5px;
  margin-bottom: 5px;
  float: right;
}
</style>
